import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
  Picker,
  ScrollView,
  Animated,
} from 'react-native';

import Config from '../../config';
import Colors from '../../common/Colors';
import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import WH_Constants from './WH_Constants';
import CommonListPage from '../common/CommonListPage';
import {DateUtils} from '../../utils/Utils';
import CommonShowPickerAction from '../../actions/common/CommonShowPickerAction';
import WH_RequestPostsAction from '../../actions/workhard/WH_RequestPostsAction';
import WH_PostItemView from './WH_PostJDZItemView';

const BUTTON_ARR =[
   {key:18, value:"生产经营",icon:require("../../../resource/images/workhard/shengchan.png")},
   {key:19, value:"科技创新",icon:require("../../../resource/images/workhard/keji.png")},
   {key:20, value:"管理提升",icon:require("../../../resource/images/workhard/guanli.png")},
   {key:21, value:"安全环保",icon:require("../../../resource/images/workhard/anquan.png")},
   {key:22, value:"党的建设",icon:require("../../../resource/images/workhard/dang.png")},
   {key:23, value:"和谐矿区",icon:require("../../../resource/images/workhard/hexie.png")},
];

export default class WH_AallTypePage extends CommonListPage {
	constructor(props) {
    super(props);
    this._dataKey = "post_id";
    this.btnGroupSelectedIndex=0;
    this.state={
      fadeAnim: new Animated.Value(0),
    }
	}
	_getViewStyle() {
    return {paddingTop:Config.paddingTop,
      backgroundColor:"#ffffff"}
  	}
	_getListViewStyle() {
    return {
      width:SizeUtils.getWindowSize().width,
      paddingTop:0,
      height:(SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(0)),
      backgroundColor:"#fff"
    };
  }
  _onScroll(event) {
    let x = event.nativeEvent.contentOffset.y;
    this.state.fadeAnim.setValue(x>220?1:0);
  }
  _onRenderHeader(){
    if (this._listView) {
      return(
      <View>
      <View style={{
        width:SizeUtils.getWindowSize().width,
        height:SizeUtils.translateDesignHeightToCode(420),
        flexDirection:'row',
        justifyContent: 'center',
        flexWrap:'wrap'
        }}>
          {BUTTON_ARR.map((item,index)=> this._getButtonView(item,index) )}
      </View>
      <View style={{
            height:SizeUtils.translateDesignHeightToCode(20),
            backgroundColor:'#eee'}}/>
      </View>
    );
    }
  }
  _getHeader(){
    return SizeUtils.translateDesignHeightToCode(420);
  }
  chagMainIndex(index){
    this.btnGroupSelectedIndex=index;
    this.doRefresh();
  }
  _renderBottomView(){
    return( <TopView ref={(ref) => {this._topView = ref}}
          chagMainIndex={this.chagMainIndex.bind(this)}
          fadeAnim={this.state.fadeAnim}/> );
  }
  _getButtonView(item,index){
    return(
      <View key={item.key} style={{width:SizeUtils.translateDesignWidthToCode(750/3),height:SizeUtils.translateDesignWidthToCode(210),
          flexDirection: 'column',alignItems: 'center',justifyContent: 'center',}}>
        <TouchableOpacity
          onPress = {() => {
            this.btnGroupSelectedIndex=index;
            this.doRefresh();
            this._topView&&this._topView.chageIndex(index);
          }}>
            <TImage source={item.icon} style={{width:100,
              height:100}} />
            <Text style={[CommonStyles.secondaryText,
              {color:index == this.btnGroupSelectedIndex?'#ee3535':'#000',textAlign:"center", fontSize:SizeUtils.translateFontSizeToCode(24), backgroundColor:"#00000000", borderWidth:0,}]}>{item.value}
            </Text>
        </TouchableOpacity>
      </View>
    );
  }
  _requestData(page, listView) {
  		new WH_RequestPostsAction().call(listView, {sort_id:1,sub_tag:BUTTON_ARR[this.btnGroupSelectedIndex].key,
      page:page, page_size:10});
  }
  refRefresh(){
    this.doRefresh();
  }
  _onRenderItem(data, index) {
    return (<WH_PostItemView refRefresh={this.refRefresh.bind(this)} data={data} index={index} showNum = {true} />)
  }
}

class TopView extends Component{
  constructor(props) {
    super(props);
    this.state={
      slectIndex:0,
    }
  }
  chageIndex(index){
    this.setState({
      slectIndex:index
    });
  }
  _getPageButton(item,index){
      return(
        <TouchableOpacity key={item.key} style={{
          height:SizeUtils.translateDesignHeightToCode(80),
          width:SizeUtils.translateDesignHeightToCode(200),
          alignItems: 'center',justifyContent: 'center',
        }} onPress={()=>{
            this.setState({
              slectIndex:index 
            });
            this.props.chagMainIndex&&this.props.chagMainIndex(index);
        }}>
          <Text style={{color:index == this.state.slectIndex ?'#ee3535':'#000'}}>{item.value}</Text>
          <View style={{borderColor:"#ee3535", borderBottomWidth:index == this.state.slectIndex ? SizeUtils.translateDesignHeightToCode(5) : 0,
            width:SizeUtils.translateDesignWidthToCode(100), height:SizeUtils.translateDesignHeightToCode(20)}}>
          </View>
        </TouchableOpacity>
      );
  }
  render() {
    return (
      <Animated.View style={{
          position:'absolute',
          opacity: this.props.fadeAnim,
          height:SizeUtils.translateDesignHeightToCode(80),
          top:Config.paddingTop,left:0,right:0,
          backgroundColor:'#fff',
        }}>
        <ScrollView showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
            horizontal={true} style={{flex:1,}}>
            {BUTTON_ARR.map((item,index)=> this._getPageButton(item,index) )}
        </ScrollView>
      </Animated.View>
    );
  }
}

